<template>
  <div :class="['TUI-profile', !isPC && 'TUI-profile-h5']">
    <div v-if="displayType !== 'setting'" :class="['TUI-profile-basic', !isPC && 'TUI-profile-h5-basic']">
      <img :class="['TUI-profile-basic-avatar', !isPC && 'TUI-profile-h5-basic-avatar']" :src="userProfile.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
        ">
      <div :class="['TUI-profile-basic-info', !isPC && 'TUI-profile-h5-basic-info']">
        <div :class="['TUI-profile-basic-info-nick', !isPC && 'TUI-profile-h5-basic-info-nick']">
          {{ userProfile.nick || "-" }}
          <!-- <span>(id:{{ userProfile.userID }})</span> -->
        </div>
        <div :class="['TUI-profile-basic-info-id', !isPC && 'TUI-profile-h5-basic-info-id']">
          <label :class="[
            'TUI-profile-basic-info-id-label',
            !isPC && 'TUI-profile-h5-basic-info-id-label'
          ]"></label>
          <div :class="[
            'TUI-profile-basic-info-id-value',
            !isPC && 'TUI-profile-h5-basic-info-id-value'
          ]">
            {{ userStore.userInfo.mobile}}
          </div>
        </div>
      </div>
    </div>
    <div v-if="displayType !== 'profile' && (!isPC || (showSetting && !hideSetting))" ref="settingDomRef"
      :class="['TUI-profile-setting', !isPC && 'TUI-profile-h5-setting']" @click.stop>
      <div v-for="item in settingList" :key="item.value" :class="[
        'TUI-profile-setting-item',
        !isPC && 'TUI-profile-h5-setting-item',
        item.value === 'exit' && 'TUI-profile-h5-setting-item-exit'
      ]">
        <div :class="['TUI-profile-setting-item-label', !isPC && 'TUI-profile-h5-setting-item-label']"
          @click="handleSettingListItemOnClick(item)">
          <div :class="['label-left']">
            <div :class="['label-title']">
              {{ TUITranslateService.t(`Profile.${item.label}`) }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <EditProfileDialog v-if="isEditProfileBoxShow" @closeEditProfileBox="closeEditProfileBox" />
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, nextTick, onMounted } from '../TUIKit/adapter-vue';
import TUIChatEngine, {
  TUITranslateService,
  TUIUserService,
  TUIStore,
  StoreName,
  TUIChatService,
} from '@tencentcloud/chat-uikit-engine';
import { TUILogin } from '@tencentcloud/tui-core';
import EditProfileDialog from '../components/EditProfile.vue';
import { IUserProfile } from '../TUIKit/interface';
import { isPC } from '../TUIKit/utils/env';
import { useRouter } from 'vue-router'
const router = useRouter()
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const props = defineProps({
  displayType: {
    type: String,
    default: 'profile', // "profile"/"setting"/"all"
  },
  showSetting: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(['update:showSetting']);
const settingDomRef = ref();
const userProfile = ref<IUserProfile>({});
const isEditProfileBoxShow = ref<boolean>(false);
const hideSetting = ref<boolean>(false);
const settingList = ref({
  // changePwd: {
  //   value: 'exit',
  //   label: '修改密码',
  //   onClick: () => {
  //     hideSetting.value = true;
  //     // isChangePwdBoxShow.value = true;
  //     isEditProfileBoxShow.value = true;
  //   },
  // },
  exit: {
    value: 'exit',
    label: '退出登录',
    onClick: () => {
      TUILogin.logout().then(() => {
        router.push({ path: '/' });
      });
    },
  },
});

const handleSettingListItemOnClick = (item: any) => {
  if (item?.onClick && typeof item?.onClick === 'function') {
    item.onClick(item);
  }
};

const closeEditProfileBox = () => {
  isEditProfileBoxShow.value = false;
  // emits('update:showSetting', false);
};

// pc click outside
let clickOutside = false;
let clickInner = false;
const onClickOutside = (component: any) => {
  document.addEventListener('mousedown', onClickDocument);
  component?.addEventListener && component?.addEventListener('mousedown', onClickTarget);
};
const onClickDocument = () => {
  clickOutside = true;
  if (!clickInner && clickOutside) {
    emits('update:showSetting', false);
    removeClickListener(settingDomRef.value);
  }
  clickOutside = false;
  clickInner = false;
};
const onClickTarget = () => {
  clickInner = true;
};
const removeClickListener = (component: any) => {
  document.removeEventListener('mousedown', onClickDocument);
  component?.removeEventListener && component?.removeEventListener('mousedown', onClickTarget);
};

watch(
  () => props.showSetting,
  (newVal: any, oldVal: any) => {
    if (isPC && newVal && !oldVal) {
      nextTick(() => {
        onClickOutside(settingDomRef.value);
      });
    }
  },
  {
    immediate: true,
  },
);

onMounted(() => {
  // get user profile
  TUIUserService.getUserProfile().then((res: any) => {
    userProfile.value = res.data;
  });
});
</script>

<style lang="scss" scoped>
@import "../styles/profile";
</style>
